<template>
    <block title="历史销售额统计">
        
        <div ref="chart" class="chart-p">
            
           
        </div>
        <tabs :list="[{label: '月', type: 0}, {label: '年', type: 1}]"
            v-model:type="btnType"
            @select="select"
            class="btns"></tabs>
    </block>
</template>
<script lang="ts" setup>
import tabs from '@/components/tabs.vue';
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
const chart = ref()
const btnType = ref(0)
let myChart:echarts.ECharts
const select = (type:number) => {
    myChart.dispose()
    if(type == 0){
        monthData()
    } else {
        yearData()
    }
}
const yearData = () => {
  
    myChart = echarts.init(chart.value);
    var option;

    option = {
       
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['2020', '2021', '2022', '2023', '2024', '2025'],
            axisLabel: {
                color: '#fff'  // 设置X轴标签颜色为绿色
            }
        },
        yAxis: {
            type: 'value',
             name: '万元',
             nameTextStyle: {
                color: '#fff'
             },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'  // 设置X轴标签颜色为绿色
            }
        },
        series: [
            {
                data: [2001, 1502, 830, 730, 1150, 1330],
                type: 'bar',
               
            }
        ]
    };

    option && myChart.setOption(option);
}

const monthData = () => {
   
    myChart = echarts.init(chart.value);
   
    var option;

    option = {
       
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['2024-12', '2025-1', '2025-2', '2025-3', '2025-4', '2025-5', '2025-6'],
            axisLabel: {
                color: '#fff'  // 设置X轴标签颜色为绿色
            }
        },
        yAxis: {
            type: 'value',
             name: '万元',
             nameTextStyle: {
                color: '#fff'
             },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'  // 设置X轴标签颜色为绿色
            }
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };

    option && myChart.setOption(option);
}

onMounted(() => {

   yearData()
})
</script>
<style scoped>
.chart-p {
    height: 24vh;
    position: relative;
}
.btns{
    position: absolute;
    z-index: 10;
    top: 6vh;
    right: 1vw;
    z-index: 10;
    color: #fff;
}
.btn{
    border:1px sandybrown solid;
    color: sandybrown;
    border-radius: 10px;
    text-align: center;
    padding: 0.1vh 1vw;
    cursor: pointer;
    display: inline-block;
    margin: 0 0 0 1vw;
   
}
.btn.active{
    color: #fff;
    background: sandybrown;
}
</style>